<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <!-- 添加ElementUI样式 -->
  <link type="text/css" rel="stylesheet" href="/css/index.css">
  <!-- 新增样式优化 -->
  <style>
    body {
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #FFD700 0%, #1E90FF 100%);
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      position: relative;
    }
    
    /* 添加动态背景元素 */
    body::before {
      content: "";
      position: absolute;
      top: -50px;
      left: -50px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(255, 215, 0, 0.3);
      animation: float 8s infinite ease-in-out;
    }
    
    body::after {
      content: "";
      position: absolute;
      bottom: -80px;
      right: -60px;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background: rgba(30, 144, 255, 0.3);
      animation: float 10s infinite ease-in-out reverse;
    }
    
    @keyframes float {
      0%, 100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(20px, 20px);
      }
    }
    
    .login-container {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 15px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      width: 400px;
      padding: 40px 30px;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      position: relative;
      z-index: 10;
    }
    
    .login-container:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
    }
    
    .login-header {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .login-header h2 {
      color: #FFD700;
      font-weight: 700;
      margin-bottom: 5px;
      font-size: 28px;
      background: linear-gradient(45deg, #FFD700, #1E90FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .login-header p {
      color: #7a7a7a;
      font-size: 14px;
    }
    
    .el-form-item {
      margin-bottom: 25px;
    }
    
    .el-button {
      width: 100%;
      height: 45px;
      font-size: 16px;
      border-radius: 25px;
      letter-spacing: 1px;
      transition: all 0.3s;
      background: linear-gradient(45deg, #FFD700, #1E90FF);
      border: none;
    }
    
    .el-button:hover {
      transform: scale(1.02);
      box-shadow: 0 8px 20px rgba(30, 144, 255, 0.4);
    }
    
    @media (max-width: 480px) {
      .login-container {
        width: 90%;
        padding: 30px 20px;
      }
    }
    
    /* 添加一些装饰性的小圆点 */
    .dot {
      position: absolute;
      width: 12px;
      height: 12px;
      background: rgba(255, 215, 0, 0.7);
      border-radius: 50%;
      z-index: 1;
    }
    
    .dot:nth-child(1) {
      top: 20%;
      left: 15%;
      animation: pulse 3s infinite;
    }
    
    .dot:nth-child(2) {
      bottom: 30%;
      right: 20%;
      animation: pulse 4s infinite 0.5s;
    }
    
    .dot:nth-child(3) {
      top: 40%;
      right: 10%;
      animation: pulse 5s infinite 1s;
    }
    
    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 0.7;
      }
      50% {
        transform: scale(1.5);
        opacity: 0.3;
      }
    }
  </style>
</head>
<body>
  <!-- 背景装饰元素 -->
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  
  <!-- 优化后的登录表单容器 -->
  <div id="app" class="login-container">
    <div class="login-header">
      <h2>欢迎登录</h2>
    </div>
    <el-form :model="loginForm" ref="form" class="login-form">
      <el-form-item>
        <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                show-password>
        </el-input>
      </el-form-item>
      <el-button
              type="primary"
              @click="handleLogin"
              :loading="loading">
        登录
      </el-button>
    </el-form>

  </div>

  <!-- 添加脚本引用 -->
  <script src="/js/vue.js"></script>
  <script src="/js/index.js"></script>
  <script src="/js/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          loginForm: {
            username: '',
            password: ''
          },
          loading: false  // 新增加载状态
        }
      },
      methods: {
        handleLogin() {
          this.loading = true;  // 显示加载动画
          var _this = this;
          // 使用axios发送登录请求
          axios.get('/user/login?userName='+this.loginForm.username+"&password="+this.loginForm.password)
                  .then(response => {
                    this.loading = false;  // 隐藏加载动画
                    if (response.data.code==200) {
                      //alert('登录成功');
                      _this.$message({
                        message: '登录成功',
                        type: 'success'
                      });

                      // 实际项目中可跳转到首页
                      window.location.href = '/html/back/index.html';
                    } else {
                      //提示信息
                      _this.$message.error('用户名或者密码错误');
                      //alert('登录失败: ' + response.data.message);
                    }
                  })
                  .catch(error => {
                    this.loading = false;  // 隐藏加载动画
                    console.error('请求错误:', error);
                    alert('登录请求异常');
                  });
        }
      }
    });
  </script>
</body>
</html>